<template>
	<div class='userCenterHome'>
		<blockquote>
			亲爱的 {{username}} ，上午好！当前时间为： {{realTime}}  &nbsp;&nbsp;欢迎使用 SUK图床
		</blockquote>
		<table class='indexTable' >
			<tr>
				<td>网站名称</td>
				<td>SUK图床</td>
			</tr>
			<tr>
				<td>当前用户名</td>
				<td>{{username}}</td>
			</tr>
			<tr>
				<td>用户组</td>
				<td>{{role}}</td>
			</tr>
			<tr>
				<td>注册时间</td>
				<td>{{create_time}}</td>
			</tr>
			<tr>
				<td>我的邮箱</td>
				<td>{{email}}</td>
			</tr>
			<tr>
				<td>我的托管</td>
				<td class='total'>
					总共：{{imgCount}} 张图片
					<span v-show='imgCount>0'>
						{{imgCount-privateImgCount}} 张不私密&nbsp; 
						{{privateImgCount}} 张私密 
					</span>
				</td>
			</tr>
		</table>	
		<el-calendar v-model="dateValue" class='calendar'></el-calendar>
	</div>
</template>
<script>
	import {api} from '@/api/public'
	export default{
		name:'userCenterHome',
		data(){
			return{
				username:sessionStorage.getItem('name'),
				userId:sessionStorage.getItem('id'),
				avator:sessionStorage.getItem('avator'),
				avatorList:[sessionStorage.getItem('avator')],
				email:sessionStorage.getItem('email'),
				role:sessionStorage.getItem('role'),
				create_time:sessionStorage.getItem('create_time'),
				dateValue:new Date(),
				imgCount:0,
				privateImgCount:0,
				realTime:0,
			}
		},
		created(){
			this.getImgCount();
			// 页面加载完后显示当前时间
			this.realTime = this.dealWithTime(new Date())
			// 定时刷新时间
			let _this = this
			  // 定时器
			this.timer = setInterval(function () {
			    _this.realTime = _this.dealWithTime(new Date()) // 修改数据date
			}, 1000)
			this.$bus.$on('imgCount',()=>{	
				this.getImgCount();
			})
			this.$bus.$on('changeName',(value)=>{
				this.username=value;
			})
		},
		methods:{
			dealWithTime (data) {
				let formatDateTime
				let Y = data.getFullYear()
				let M = data.getMonth() + 1
				let D = data.getDate()
				let H = data.getHours()
				let Min = data.getMinutes()
				let S = data.getSeconds()
				let W = data.getDay()
				H = H < 10 ? ('0' + H) : H
				Min = Min < 10 ? ('0' + Min) : Min
				S = S < 10 ? ('0' + S) : S
				switch (W) {
					case 0:
					W = '天'
					break
					case 1:
					W = '一'
					break
					case 2:
					W = '二'
					break
					case 3:
					W = '三'
					break
					case 4:
					W = '四'
					break
					case 5:
					W = '五'
					break
					case 6:
					W = '六'
					break
					default:
					break
				}
				formatDateTime = Y + '年' + M + '月' + D + '日 ' + H + ':' + Min + ':' + S + ' 星期' + W+' ';
				return formatDateTime;
			},
			async getImgCount(){
				let userId=sessionStorage.getItem('id');
				let {imgCount,privateImgCount}=await api('get','image','getCount',{userId:userId});
				this.imgCount=imgCount;
				this.privateImgCount=privateImgCount;
			},
		},
		activated(){
			let scrollTop=document.querySelector('.el-main');
			scrollTop.scrollTop=0;
		},
		// 注意在vue实例销毁前，清除我们的定时器。
		destroyed () {
			this.$bus.$off('changeName');
			this.$bus.$off('imgCount');
			if (this.timer) { 
			    clearInterval(this.timer)
			}
		}
	}
</script>
<style scoped lang='stylus'>
.userCenterHome{
	blockquote{
		margin-bottom: 10px;
		padding: 15px;
		line-height: 22px;
		color:#fff;
		border-left: 5px solid #009688;
		border-radius:3px;
		background-color: #009688!important;
	}
	.indexTable{
		width: 50%;
		background-color: #fff;
		color: #666;
		border: 1px solid grey;
		border-collapse: collapse;
		tr{
			&:hover{
				background: #f2f2f2;
			}
			transition: .2s;
			td{
				padding: 1.2em .7em;
				font-size: 15px;
				border: 1px solid #e6e6e6;
				&.total{
					>span{
						margin-left: 1em;
					}
				}
			}
		}
	}
	.indexTable,.el-calendar{
		float: left;
	}
	.el-calendar{
		width: 49%;
		margin-left: 1%;
	    box-sizing: border-box;
	    border: 1px solid #e6e6e6;
	    >>>.el-calendar-day {
			height: 58px;
		}
		>>> .el-calendar-table{
			div{
				transition: .2s;
			}
			td.is-selected,td:hover div{
				background-color:cyan;
			}
		}
	}
 }
@media (max-width: 1366px){
	.indexTable tr td{
		padding:.8em .7em;
	}
	.indexTable,.el-calendar{
		width: 99%;
		float: none;
		margin:0 auto;
	}
}
</style>